<template>
    <div class="dashboard-container">
        <el-row :gutter="32">
            <el-col :lg="16">
                <div class="el-card">
                    <div class="el-card__body" style="height: 582px;">
                        <MapComponent />
                    </div>
                </div>
            </el-col>

        </el-row>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';

    import MapComponent from './components/MapComponent'; // 确保路径正确
    import AMapLoader from "@amap/amap-jsapi-loader";
    import {getWaterMap} from "@/api/indexs";
    window._AMapSecurityConfig = {
        // 设置安全密钥
        securityJsCode: "2353313c155de6c8befa6921880c92fe",
    };
    export default {
        name: 'Dashboard',
        data() {
            return {
                currentRole: 'adminDashboard',
                map: null,
                polyline: null,
                mapList: null,
                lnglat: [117.120128,36.652069],
                AMapPluyins: ["AMap.Geolocation","AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder","AMap.ControlBar"],
            }
        },
        components: {
            MapComponent
        },
        computed: {

        },
        created() {
        },
        methods: {

            initMap() {
                let _self = this
                let centerLen = _self.lnglat;
                AMapLoader.load({
                    key: "86df05c4db672bcbfabc7c71226a5c0a", // 申请好的Web端开发者Key，首次调用 load 时必填
                    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins: this.AMapPluyins,
                }).then((AMap) => {
                        this.map = new AMap.Map("gaode_Map", {
                    zoom: 10, // 初始地图级别
                    // center: [117.120128,36.652069] // 初始地图中心点
                });

                // AMapLoader.load({
                //     key: "86df05c4db672bcbfabc7c71226a5c0a", // 申请好的Web端开发者Key，首次调用 load 时必填
                //     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                //     plugins: this.AMapPluyins,
                // }).then((AMap) => {
                //     this.map = new AMap.Map("gaode_Map", {
                //         // 设置地图容器id
                //         viewMode: "3D", //  是否为3D地图模式
                //         zoom: 18, // 初始化地图级别
                //         center: centerLen, //中心点坐标
                //         resizeEnable: true,
                //     });
                //     // this.setMarker(centerLen)
                //     // 关键字查询
                //     // this.searchMap();
                //     // 监听鼠标点击事件
                //     this.map.on("click", this.clickMapHandler);
                // })
                //     .catch((e) => { });

                //
                // this.$nextTick(() => {
                //     //高德地图会报高德地图加载报错-------禁止多种API加载方式混用
                //     AMapLoader.reset();
                //     AMapLoader.load({
                //         key: "86df05c4db672bcbfabc7c71226a5c0a", // 申请好的Web端开发者Key，首次调用 load 时必填
                //         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                //         plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.LngLat"], // 需要使用的的插件列表
                //     })
                //         .then((AMap) => {
                //             _self.map = new AMap.Map("gaode_Map", {
                //                 // 设置地图容器id
                //                 viewMode: "3D", //  是否为3D地图模式
                //                 zoom: 18, // 初始化地图级别
                //                 center: centerLen, //中心点坐标
                //                 resizeEnable: true,
                //             });
                //
                //
                //             // 添加toolbar--放大缩小
                //             // const toolbar = new AMap.ToolBar();
                //             // _self.map.addControl(toolbar);
                //             // 创建点标点
                //             // _self.markPoints();
                //             // 创建多点折线
                //             // _self.drawPolyline();
                //         })
                //         .catch((e) => {
                //             console.log(e);
                //         });
                });
            },
            markPoints() {
                let _self = this
                //创建图标icon
                var icon = new AMap.Icon({
                    image: "https:***/uploads/point.png", // 图标的图片地址
                    // size: new AMap.Size(32, 32), // 图标的大小
                    // className: "your-icon-class" // CSS类名---通过类名去设置样式
                });

                // 根据经纬度数组，循环生成多个标记点
                _self.mapList.forEach((item) => {
                    console.log("item",item)
                    // 创建一个 Marker 实例：
                    const marker = new AMap.Marker({
                        position: new AMap.LngLat(item.lng, item.lat), // 经纬度
                        map: this.map,
                        icon: icon, // 使用自定义的图标
                        offset: new AMap.Pixel(-0.5, -16), // 设置偏移量，负值向左上方偏移
                        anchor: "center", // 设置标记点的锚点位置
                    });

                    // 将创建的点标记添加到已有的地图实例：
                    _self.map.add(marker);
                    _self.map.setFitView();
                });
            },
            drawPolyline() {
                let _self = this
                // 创建折线，path直接丢数组
                _self.polyline = new AMap.Polyline({
                    path: this.mapList.map((v) => {
                        return [v.lng, v.lat];
                    }),
                    borderWeight: 2, // 线条宽度
                    strokeColor: "#ffd121", // 线条颜色
                    lineJoin: "round", // 线条连接处样式
                    strokeWeight: 6, // 线宽
                    strokeStyle: "dashed", // 线样式：虚线
                    strokeDasharray: [20, 5], // 虚线样式：每条线段的长度和间隔
                    strokeOpacity: 0.5, //线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
                    lineCap: 'round', //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
                });

                this.polyline.setMap(this.map);
            },
        }
    }
</script>
